<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id='app'>
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="80px">
            <el-form-item label="用户名" prop="nickname">
                <el-input v-model="dataForm.nickname" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="dataForm.password" placeholder="密码"></el-input>
            </el-form-item>
   
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    dataUrl: "http://localhost:88/api",
                    dataForm: {
                        uid: 0,
                        nickname: '',
                        password: '',
                        head: '',
                    },
                    dataRule: {
                        nickname: [
                            { required: true, message: '用户名不能为空', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '密码不能为空', trigger: 'blur' }
                        ]
                    }
                }
            },
            //方法集合
            methods: {
                // 表单提交
                dataFormSubmit() {
                    this.$refs['dataForm'].validate((valid) => {
                        if (valid) {
                            axios({
                                url: `${this.dataUrl}/user/user/login`,
                                method: 'post',
                                
                                data: ({
                                    'nickname': this.dataForm.nickname,
                                    'password': this.dataForm.password,
                                })
                            }).then(({ data }) => {
                                if (data && data.code === 0) {
                                    this.$message({
                                        message: '登录成功',
                                        type: 'success',
                                        duration: 1500,
                                        onClose: () => {
                                            console.log(data);
                                            localStorage.setItem("token",data.data)
                                            localStorage.setItem("loginName",data.user.nickname)
                                            localStorage.setItem("loginId",data.user.uid)
                                            location="activity_list.html"
                                        }
                                    })
                                } else {
                                    this.$message.error(data.msg)
                                }
                            })
                        }
                    })
                }

            },
            created() {

            },
        })
    </script>
</body>

</html>